<template>
  <div class="person">
    <h1>姓名: {{name}}</h1>
    <h1>年龄: {{age}}</h1>
    <button @click="updateName">修改名字</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="showtel">电话</button>
  </div>
</template>

<script lang="ts">
export default {
  props: [],
  components: {},
  data() {
   return {
    name: 'kevin',
    age: 23,
    tel:13662462707
   }
  },
  created() {},
  mounted() {},
  methods: {
    updateName() {
        this.name = "tom"
    },
    updateAge() {
        this.age ++;
    },
    showtel() {
        alert(this.tel)
    }
  },
}
</script>
<style>
    .person {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 5px;
    }
</style>